<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <title>Shibe-Doge Data Visualization Tool</title>
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript" src="utilities.js"></script>
        <script type="text/javascript" src="globals.js"></script>
        <script type="text/javascript" src="dataTable.js"></script>
        <script type="text/javascript" src="filterMenus.js"></script>
        <script type="text/javascript" src="usmap.js"></script>
        <script type="text/javascript" src="geocode.js"></script>
        <script type="text/javascript" src="information.js"></script>
        <script type="text/javascript" src="layers.js"></script>
        <script type="text/javascript" src="admissionsDomainModel.js"></script>
        <script type="text/javascript" src="usCensusDomainModel.js"></script>
        <script type="text/javascript" src="scraper.js"></script>
        <script type="text/javascript" src="regionSelection.js"></script>
		<script type="text/javascript" src="filters.js"></script>
        <script type="text/javascript" src="shibeDogeAdmissionsTool.js"></script>
        <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div id="wrap">
            <div id="top">
                <h1 style='text-align: center'>Shibe-Doge Data Visualization Tool</h1>
                <p style='display:none'>
                    Enter a CEEB:
                    <input type="text" id="ceeb" value="380000">
                    <input type="button" id="lookupButton" value="Lookup">
                </p> 
                <table>
                	<tr>
                		<td>
                		<div id = 'logo'>
        				<img src= https://login.up.edu/images/upcustomimages/app_upLogo.png>
                		</div>
                		</td>
                		<td>
                			<div id='regionSelect'>
                				<div id='stateSelect'>
                					State:
                					<select id='state'></select>
                				</div>
                				<div id='citySelect'>
                					City:
                					<select id='city'></select>
                					<input type='button' id='regionSelectButton' value='Select'>
                				</div>
								<div id='loadingRegionMessage'>
									Please wait while we load the locations of high schools...
								</div>
                			</div>
                		</td>
                	</tr>
                </table>
                <p id="errormessage"> </p>
                <div id="map_title"></div>
            </div>
            <div id="bottom">
                <div id="contig_us_map_canvas"></div>
            </div>
            <div id="panels">
                <div class="filterPanel" id="regionFilterPanel" style='display:none'>
                    Filter by Region:
                </div>
                
                <div id='filterControls'>
					<center>Filter Controls</center>
                </div>
                
                <div id='summaryDataTableContainer'>
					<table>
						<tr>
						<td><div id='genderSelect'>
							Gender:
							<select id='gender'></select>
						</div></td>
						<td><div id='majorSelect'>
							Major:
							<select id='major'></select>
						</div></td>
						<td><div id='ethnicitySelect'>
							Ethnicity:
							<select id='ethnicity'></select>
						</div></td>
						<td><div id='gpaRange'>
							GPA:
								<div>
									<input class="textBox" id="gpaLower" type="text" maxlength="4"/>
								</div></td>
								<td><div id='toWord'>to</div></td>
								<td><div>
									<input class="textBox" id="gpaUpper" type="text" maxlength="4"/>
								</div></td>
						</div> 
					</tr
					</table>
					<table>
					<input type='button' id='filterSelectButton' value='Apply Filter'/>
					<input type='button' id='filterResetButton' value='Reset Filter'/>
                	</table>
					<h2 id='tablesTitle'>
                		Summary Data for All United States applicants
                	</h2>
                	<h2 id='years'>
                		From 2011 and 2012
                	</h2>
                	<table id='summaryDataTable1' class='summaryDataTable'>
                		<tr style= 'text-decoration:underline;'>
             				<th>Average SAT Verbal</th>
             				<th>Average SAT Math</th>
             				<th>Average GPA</th>
             				<th>Number of Applicants</th>
             				<th>Number of Accepted Students</th>
             				<th>Number of Enrolled Students</th>
             			</tr>
                		<tr id='dataRow1'></tr>
                	</table>
                	<table id='summaryDataTable2'>
                		<tr style= 'text-decoration:underline;'>
                			<th>Most common religion</th>
                			<th>Most common ethnicity</th>
                			<th>Most common major</th>
                			<th>Most common gender</th>
                			<th class='cityColumn'>City with most applicants</th>
                			<th class='stateColumn'>State with most applicants</th>
                		</tr>
                		<tr id='dataRow2'></tr>
                	</table>
                </div>
                <div id='loadingMessage'>
                	Loading Data, Please Wait......
                </div>
                <div id='showAll'>
                	<input type='button' id='showAllButton' value='Show Data for All Applicants'>
                </div>
                
            </div>
        </div>
    </body>
</html>